<template>
  <view>
    <span v-for="(part, index) in parseText(item.remark)" :key="index" :style="{ color: part.color }">
      {{ part.text }}
    </span>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    parseText(text) {
      const parts = [];
      let currentIndex = 0;
      let match;
      // 修改正则表达式以匹配 <font color=...> 标签
      const colorRegex = /<font color=["']?([^"']+)["']?>(.*?)<\/font>/g;
      while ((match = colorRegex.exec(text))!== null) {
        const before = text.slice(currentIndex, match.index);
        if (before) {
          parts.push({ text: before, color: 'inherit' });
        }
        parts.push({ text: match[2], color: match[1] });
        currentIndex = match.index + match[0].length;
      }
      const after = text.slice(currentIndex);
      if (after) {
        parts.push({ text: after, color: 'inherit' });
      }
      return parts;
    }
  }
};
</script>

<style scoped>
</style>